<script setup>
import {useSlots,Comment} from 'vue'

const props = defineProps({
  limit: {
    type: [Number, String],
    default: 3
  }
})
const slots = useSlots()
const dft = slots.default().filter(it=>it.type!=Comment)
let length = dft.length
const limit = Number(props.limit)
let hasPopup = false;
const main = []
const pop = []
//超过
if (length > limit && limit > 0) {
  //limit = pl - 1;

  for (let i = 0; i < limit - 1; i++) {
    main.push(dft[i])
  }
  for (let i = limit - 1; i < length; i++) {
    pop.push(dft[i])
  }
  hasPopup = true
} else {
  main.push(...dft)
}

</script>
<template>
  <span class="link-buttons">
    <template v-for="child in main">
       <component :is="child"></component>
    </template>
    <Tooltip theme="white" v-if="hasPopup"
      placement="bottom"
             trigger="click"
      className="link-buttons-tooltip"
    >
      <span>更多</span>
      <template #content>
        <div class="link-buttons-popup">
          <template v-for="child in pop">
            <component :is="child"></component>
          </template>
        </div>
      </template>
    </Tooltip>

  </span>
</template>
<style>
.link-buttons > * {
  color: var(--pc);
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  padding: 0 10px;
  border-left: 1px solid #E9E9E9;
  outline: none;
  transition: color .2s ease;
}

.link-buttons > *:first-child {
  border-left: none;
}

.link-buttons > *:hover {
  outline: 0;
  text-decoration: none;
  color: #379469 !important;
}

.link-buttons-popup {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.link-buttons-popup > * {
  width: 100%;
  padding: 5px 10px;
  cursor: pointer;
  user-select: none;
  transition: color .2s ease;
  text-align: center;
  margin: 0;
}

.link-buttons-popup > *:hover {
  background-color: #F5F7FA;
  color: #188FFE;
}

.link-buttons-tooltip.h-tooltip .h-tooltip-inner-content {
  padding: 4px 0;
}
.link-buttons>.h-btn{
  border: none;
  border-left: 1px solid #E9E9E9;
  background: transparent;
  box-shadow: none;
  margin: 0;
  border-radius: 0 !important;
  height: 16px;
}
.link-buttons > .h-btn:first-child {
  border-left: none;
}
.link-buttons > .h-btn[disabled]:hover {
  background-color: transparent;
  border-color:#E9E9E9;
}
.link-buttons-popup > .h-btn {
  border: none;
  margin: 0;
  box-shadow:none;
}

</style>
